<template>
  <view class="">
    <!-- 攻略图片 -->
    <image :src="IMAGE_BASE + guideInfo.image" mode="scaleToFill" class="guide-image"></image>

    <!-- 攻略内容 -->
    <view class="guide-content">
      <view class="guide-title">{{ guideInfo.title }}</view>
      <view class="guide-meta">
        <text class="author">作者：{{ guideInfo.author }}</text>
        <text class="time">{{ guideInfo.createTime }}</text>
      </view>
      <view class="guide-text" v-html="guideInfo.content"></view>
    </view>
  </view>
</template>

<script>
import { getGuideDetail } from '@/api/guide.js'
import config from '../../api/config.js'

export default {
  data () {
    return {
      guideId: null,
      guideInfo: {},
      IMAGE_BASE: config.image_base
    }
  },
  onLoad (options) {
    this.guideId = options.id
    this.getGuideInfo()
  },
  methods: {
    getGuideInfo () {
      getGuideDetail(this.guideId).then(res => {
        if (res.code === 200) {
          this.guideInfo = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.container {
  display: block;
}

.guide-image {
  width: 100%;
}

.guide-content {
  padding: 30rpx;
  background: #fff;

  .guide-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }

  .guide-meta {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 30rpx;
  }

  .guide-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.8;
  }
}
</style>